<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>gallery</title>
	<style>
		div {
			margin-left: 50px;
		}
		a {
			color: #c60;
			font-weight: bold;
			text-decoration: none;
		}
		ul {
			padding: 0;
		}
		li {
			float: left;
			list-style: none;
			margin: 0 40px 20px 0;
		}
		img {
			display: block;
			border: 1px solid #000;
			clear: both;
		}

	</style>
</head>
<body>
	<div>
		<h1>Snapshots</h1>
		<ul>
			<li>
				<a href="imgs/html.jpg" title="只使用HTML">HTML</a>
			</li>
			<li>
				<a href="imgs/css.jpg" title = "加上了CSS">CSS</a>
			</li>
			<li>
				<a href="imgs/js.gif" title = "再加上js">JS</a>
			</li>
		</ul>
		<img src="imgs/ph.jpg" alt="img" id = "placeholder">
		<p id = "description">Choose an image.</p>
	</div>
	
	<script>
	// 补充知识点：阻止a标签跳转用return false;具体使用方法上网查
	/* 需求：
	1. 点击"HTML" "CSS" "JS"分别在方框中展示对应的图片
	2. 同时，p标签里要显示相应的a标签的title
	*/

	</script>
</body>
</html>